<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .blue {
      color: blue;
    }
  </style>
</head>
<body>

<!-- 模板内越简单越好 -->
<div id="app">
  <h1>{{ reversedMsg }}</h1>
  <h1>{{ msg.split('').reverse().join('') }}</h1>
  <h1>length: {{ msg.length }}</h1>
  <ul>
    <li v-for="item of list">{{item}}</li>
  </ul>
<!--  <div>{{ list.length === 0 ? '暂无数据' : `总共${list.length}有项` }}</div>-->
  <div>{{ listText }}</div>
  <h1>now: {{now}}</h1>
  <h1>method now1: {{now1()}}</h1>
</div>
<script src="vue.js"></script>
<script>
  const app = new Vue({
    data: {
      msg: '计算属性 & 侦听器',
      list: [
        'item1',
        'item2',
        'item3',
        'item4',
      ],
    },
    watch: {
      msg(after, befor) {
        console.log(after)
        console.log(befor)
      }
    },
    // 计算属性是更复杂的data
    // 一般用于对data进行处理
    // 计算属性是基于它们的响应式依赖进行缓存
    computed: {
      now() {
        return Date.now()
      },
      reversedMsg() {
        // return '123'
        return this.msg.split('').reverse().join('')
      },
      listText() {
        if (this.list.length === 0) {
          return '暂无数据'
        }
        return `总共${this.list.length}有项`
      }
    },
    methods: {
      now1() {
        return Date.now()
      },
    }
  }).$mount('#app')
</script>



</body>
</html>